<template>
	<section class="login_body animated fadeIn">
		<mt-header title="登录界面">
		  <router-link to="/register" slot="right">
		    <mt-button >注册</mt-button>
		  </router-link>
		</mt-header>
		<div class="login_bg">
			<div class="login_content">
				<div class="user_pic"></div>
			<div class="user_pic"></div>
				<mt-field label="用户名" placeholder="请输入用户名" type="tel" v-model="username"></mt-field>
				<mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
				<mt-button type="primary" size="normal" @click="goLogin">登 录</mt-button>
			</div>
		</div>	
	</section>	
</template>
<script>
	export default {
		name:'Login',
		data(){
			return {
				username:'',
				password:''
			}
		},
		methods:{
			goLogin(){
				this.$store.commit('setLoginStatus',true);
				this.$router.push('/home');
			}
		}
	}
</script>
<style scoped>
	.login_content{
		width: 80%;
	    height: 500px;
	    background: rgba(130, 114, 114, 0.3);
	    border-radius: 10px;
	    padding: 10px;
	}
	.mint-button{
		width: 100%;
		border-radius: 20px;
	}
	.mint-cell{
		border-radius: 20px;
		margin: 10px 0;
	}
</style>